<template>
  <div id="swiper" class="swiper-container">
    <!-- swiper - dom -->
    <div class="swiper-wrapper">
      <div
        v-for="(item, index) in bannerList"
        :key="index"
        class="swiper-slide"
        :class="item.className"
      >
        <div class="banner-container">
          <!-- 背景图 -->
          <img
            v-if="item.bgUrl"
            :src="item.bgUrl"
            alt
            class="ani"
            swiper-animate-effect="fadeIn"
            swiper-animate-duration="1.2s"
            swiper-animate-delay="0.2s"
          />
          <!-- 内容部分 -->
          <div
            class="banner-content ani"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration=".6s"
            swiper-animate-delay="0.1s"
          >
            <!-- 标题 -->
            <div class="banner-title">{{item.bannerName}}</div>
            <!-- 简介 -->
            <div v-if="item.bannerEnName" class="banner-dir">{{item.bannerEnName}}</div>
            <!-- 按钮 -->
            <div class="showBtn" v-if="item.showbtn">{{item.btnName}}</div>
          </div>
        </div>
        <!-- 关于我们特殊部分 -->
        <div class="about-list">
          <h5>
            <span>优质</span>的客户服务
          </h5>
          <h5>
            高效的办事
            <span>效率</span>
          </h5>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  name: "swiper",
  props: {
    bannerList: {
      trype: Array,
      required: true
    }
  },
  data() {
    return {
      swiper: null
    };
  },
  mounted() {
    this.$nextTick(e => {
      this.swiper = new Swiper("#swiper", {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination"
        },
        on: {
          init() {
            swiperAnimateCache(this); //隐藏动画元素
            swiperAnimate(this); //初始化完成开始动画
          },
          slideChangeTransitionEnd() {
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            this.slides
              .eq(this.activeIndex)
              .find(".ani")
              .removeClass("ani"); // 动画只展现一次，去除ani类名
          }
        }
      });
    });
  }
};
</script>

<style lang="stylus" scoped>
@import '../static/styl/mixin.styl'
#swiper
  height 697px
  width 100%
  .swiper-wrapper
    // transition-timing-function: cubic-bezier(1,0,.5,1); //特效
    height 100%
    .swiper-slide
      width 100%
      height 100%
      color #fff
      position relative
    .banner1
      background linear-gradient(187deg, rgba(15, 34, 85, 1), rgba(42, 59, 114, 1))
      .banner-container
        img
          positCenter(50%, 30px, auto, auto, 0, -50%)
          width 900px
          height 564px
        .banner-content
          .banner-title, .banner-dir
            margin 296px 0 20px 126px
            font-size 52px
          .banner-dir
            margin-top 0
            font-size 22px
            letter-spacing 8px
    .banner2
      background-color #14161C
      img
        position absolute
      .banner-content
        width 100%
        text-align center
        .banner-title
          font-size 72px
          text-align center
          margin 222px auto 18px
        .showBtn
          width 214px
          line-height 40px
          background-color #00A1FC
          margin 0 auto
          font-size 18px
          letter-spacing 2px
    .banner3
      background linear-gradient(180deg, rgba(0, 0, 3, 1), rgba(5, 18, 144, 1))
      img
        positCenter(50%, 216px, auto, auto, 0, -50%)
        width 483px
        height 265px
      .banner-content
        margin-left 156px
        text-align left
        .banner-title
          font-size 52px
          margin 277px auto 32px
        .banner-dir
          font-size 30px
    .banner4
      bgImg('../assets/banner4.png', cover)
      .about-list
        positCenter(46%, auto, auto, 50%, -50%, -50%)
        h5
            text-align center
            font-size 64px
            color #fff
            font-weight bold
            text-shadow 0px 0px 13px rgba(54, 54, 54, 0.81)
            span
                color #2FA4F5
        h5:last-child
            margin-top 15px
</style>